<template>
    <div class="login">
        <div class="head_icon">
            <img src="../assets/pic/head_icon.svg">
        </div>
        <input type="text" placeholder="请输入手机号" v-model="phone" :class="{active:phoneAct}">
        <p :class="{tips:true,tips_active:phoneAct}">请输入正确的手机号</p>
        <input type="password" placeholder="请输入密码" v-model="psd" :class="{active:psdAct}">
        <p :class="{tips:true,tips_active:psdAct}">密码错误</p>
        <button @click="login">登录</button>
        <div class="others">
            <router-link to="/register">立即注册</router-link>
            <router-link to="/login">忘记密码</router-link>
        </div>
        <SliderCaptchaVue v-show="loginLock" @verifyRes="succHandler" @verifyErr="failHandler"></SliderCaptchaVue>
    </div>
</template>

<script setup>
    import { regPhone,regPsd } from "../utils/Reg.js"
    import { ref,reactive,toRefs } from "vue";
    import { useStore } from 'vuex';
    import { useRouter,useRoute }  from 'vue-router';
    import SliderCaptchaVue from "@/components/SliderCaptcha.vue";
    import { request } from "@/utils/Request.js";
    import { Toast } from 'vant';
    const router=new useRouter();
    const route=new useRoute();
    const store=useStore();
    let loginLock=ref(false)

    let phone=ref('')
    let psd=ref('')
    let iptAct=reactive({
        'phoneAct':false,
        'psdAct':false
    })
    let { phoneAct,psdAct } = toRefs(iptAct)

    const succHandler=()=>{
        let a=Object.keys(route.query).length
        if(a){
            router.push(route.query.redirct)
        }else{
            router.push('/mine')
        }
    }
    const failHandler=()=>{
        Toast.fail('验证错误');
    }

    const login=async()=>{
        const res=reactive({
            'phone':regPhone(phone),
            'psd':regPsd(psd),
        })
        for (const key in res) {
            iptAct[`${key}Act`]=!res[key]
        }
        if (res.phone&&res.psd) {
            try {
                const resBack=await request('/login',{
                'phone':phone.value,
                'password':psd.value  
                })
                store.commit('user/changeIsLogin',resBack.data.result)
                loginLock.value=true
            } catch (error) {
                Toast.fail('登录失败');
                // loginLock.value=false
            }
           

        }
    }
</script>

<style lang="scss" scoped>
    @import "../style/base.scss";
    .login{
        box-sizing: border-box;
        margin: 0 auto;
        width: 3.39rem;
        padding: 0 .22rem;
        .head_icon{
            margin: 1.2rem auto .4rem;
            width: .66rem;
            height: .66rem;
            border-radius: 50%;
            background-color: teal;
        }
        input{
            box-sizing: border-box;
            margin: 0 auto;
            width: 2.95rem;
            height: .48rem;
            background: #F9F9F9;
            border: .01rem solid rgba(0,0,0,0.10);
            border-radius: .06rem;
            font-family: PingFangSC-Regular;
            font-size: .16rem;
            color: rgba($color: #000000, $alpha: 0.5);
            text-indent: 1em;
            outline: none;
        }
        .active{
            border-color: red;
        }
        .tips{
            margin: .04rem auto;
            width: 100%;
            height: .12rem;
            line-height: .12rem;
            font-family: PingFangSC-Regular;
            font-size: .12rem;
            color: red;
            visibility: hidden;
        }
        .tips_active{
            visibility: visible;
        }
        button{
            margin: .16rem auto;
            width: 2.95rem;
            height: .48rem;
            background: #0091FF;
            box-shadow: 0 .04rem .08rem 0 rgba(0,145,255,0.32);
            border-radius: .04rem;
            border: none;
            font-size: .16rem;
            color: #FFFFFF;
        }
        .others{
            position: relative;
            width: 100%;
            height: .2rem;
            @include flexSet(center,center,none);
            &::before{
                content: '';
                display: block;
                position: absolute;
                top: .04rem;
                left: 1.35rem;
                background-color: rgba(0,0,0,0.50);
                width: .01rem;
                height: .12rem;
            }
            
            a{
                display: block;
                width: .8rem;
                height: .2rem;
                line-height: .2rem;
                font-size: .14rem;
                color: rgba(0,0,0,0.50);
            }
        }

    }
</style>